<template class="">
  <el-container class="al-width-100 page-reg" direction="vertical">
    <el-row class="" style="margin: 10% 0 10% 0">
      <el-col :span="14" class="">
        <pre> </pre>
      </el-col>
      <el-col :span="8" class="-border-blue">
        <div style="width:360px"
             class="al-z-index-99 al-p-20px al-box-shadow-radius al-ma-center"
        >
          <div class="al-flex-container-center-h">
            <img src="../../assets/pandalogo.png">

          </div>

          <div>
            <div class="al-title-h2  al-flex-container-center-h">熊猫约拍 - 注册</div>
          </div>
          <br>
          <el-form
                  :model="ruleForm"
                  status-icon
                  :rules="rules"
                  ref="ruleForm"
                  label-width="140px"
                  class="demo-ruleForm al-m-top-60px">
            <el-form-item label="帐号" class="">
              <el-input class="al-float-left al-width-60" v-model="ruleForm.username" placeholder="请输入账号">

              </el-input>
            </el-form-item>

            <el-form-item label="密码" prop="pass">
              <el-input class="al-float-left al-width-60" type="password"
                        v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码">
              </el-input>
            </el-form-item>
            <div class="al-flex-container-center-h">
              <div class="al-d-il-blk al-ma-center">
                <el-button class="" type="primary" round @click="submitForm('ruleForm')">注册</el-button>
                <el-button round @click="resetForm('ruleForm')">重置</el-button>
              </div>
            </div>

          </el-form>

          <div class="al-m-top-20px">
            <el-link @click="goPage('/login')"
                     :underline="false" class="al-box-container">
              已有帐号？现在去登录吧
            </el-link>
          </div>
        </div>
      </el-col>
      <el-col :span="2" class="">
        <div></div>
      </el-col>
    </el-row>
  </el-container>
</template>


<script>
  import {USER_REGISTER} from "../../util/network/api/user/api-user";
  import {request} from "../../util/network/request";

  export default {
    name: 'register',
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };

      return {
        bg: 'https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/isux/20171122191603_896cd9.jpg',
        ruleForm: {
          username: '',
          password: '',
        },
        rules: {
          pass: [
            {validator: validatePass, trigger: 'blur'}
          ],
        }
      };
    },
    methods: {
      logoUrl() {
        return '../../assets/panda.png'
      },

      goPage: function (path) {
        this.gotoPage(path);
      },

      //发送请求
      sendRequest: function (path, data) {
        let url = this.createUrl(path);
        let headers = {
          // 'Content-Type': 'application/json'
          'Content-Type': 'application/x-www-form-urlencoded'
        };
        let res = this.request('post', url, data, headers);
        console.log(res);
      },

      //提交表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.validateForm()){
              this.register();
            }
          } else {
            return false;
          }
        });
      },

      //重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.ruleForm.username = '';
        this.ruleForm.password = '';
      },

      //验证表单
      validateForm(){
        let rule1 = this.ruleForm.username.length < 6;
        let rule2 = this.ruleForm.password.length < 6;
        if (rule1 && rule2){
          this.$message.warning("帐号或密码不能少于6位");
          return false;
        }
        return true;
      },

      //提交注册
      register(){
        let data = {
          username: this.ruleForm.username,
          password: this.ruleForm.password
        };

        request({
          method: 'post',
          url: USER_REGISTER,
          // url: 'http://localhost:8764/api/v1/user/register',
          data: this.qsParam(data),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(res => {
          if (res.data.code == 1) {
            this.$message.success('注册成功');
            this.goPage('/login');
          } else {
            this.$message(res.data.msg);
          }
        }).catch(err => {
          console.log(err);
          this.$message.error('未知错误，请稍候重试');
        })
      },
    }
  }
</script>

<style scoped>
  .page-reg {
    /*background-color: #000000;*/
    background-image: url("https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/isux/VVCmQ2CrXWhP8QyGND5lps2nD6BSLXBcNXhUA3HANRt.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    background-attachment: fixed;
  }

</style>
